<template>
	<div class="util">
	  <span>
	  	<Pay style="width:30px;"/>
	  </span>
	  <el-tag>缴费记录</el-tag>
	</div>
	<div class="main">
		<el-table :data="tableData.records" height="400" 
		:header-cell-style="{background:'#F3F4F7',color:'#555',}"
		style="width: 100%;">
				<el-table-column label="用户" prop="username" align="center"></el-table-column>
				<el-table-column label="金额" prop="amount" align="center"></el-table-column>
				<el-table-column label="时间" prop="paymentTime" align="center"></el-table-column>
		</el-table>
		<el-pagination
		     background
		    :page-count="tableData.pages"
		    v-model:current-page="params.page"
		    :total="tableData.total"
		    :close-on-click-modal="false"
		    @current-change="getTableData()"
		      layout="prev, pager, next, jumper"
		    ></el-pagination>
	</div>
	
</template>

<script setup>
import Pay from '@/components/icons/CommunityIcon/pay'
import Search from '@/components/icons/CommunityIcon/Search'
import { ref, reactive } from 'vue'
import { ElMessage,ElMessageBox ,ElTable} from 'element-plus'
import {_axios,post,get} from '@/plugins/axios'
import url from './util'
const input = ref('')
const formObj = null
const tableData = 
// ref([])
reactive({
	  records: [] ,// 初始化为空数组
	  pages: 0,
	  total: 0
	});
	const params = reactive({
	    page: 1,
	    limit: 8
	})
const propertyFee=reactive({
	id:null,
		userId:null,
		username:'',
		paymentTime:'',
		amount:null,
})

getTableData()

function getTableData(){
	tableData.records=[]
	post('/propertyFee/list2',{pageNo:params.page, pageSize:params.limit },content=>{
		for(const key in content.records)
		{
			const userId=ref(content.records[key].userId)
			const username=ref('')
			const paymentTime=ref(content.records[key].paymentTime)
			const amount=ref(content.records[key].amount)
			post("/tUser/getById",{id:content.records[key].userId},content2=>{
				username.value=content2.username
				tableData.records.push({userId:userId.value,username:username.value,paymentTime:paymentTime.value,amount:amount.value})
			})
			
		}
		    tableData.pages = content.pages
		    tableData.total = content.total	
	})
}
const search=()=>{
	console.dir(input.value)
	post(url.search, {input:input.value}, content => {
		tableData.value=content
		console.dir(tableData.value)
	},formObj)
}

// _axios.request({//解决跨域问题
// 	url:'/propertyFee/list',
// 	method:'get'
// }).then(response=>{
// 	console.dir(response)
// 	if(response.data){
// 		tableData.value = response.data
// 	}
// 	}).catch(error => {
// 	  console.error("An error occurred:", error);
// 	});
</script>

<style>
	
		.el-button{
			margin-top: 10px;
			margin-left: 5%;
		}
	
	.util{
		width: 100%;
		height: 50px;
		background-color: #ffffff;
		border-radius: 4px;
		margin-bottom: 20px;
		box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
		display: flex;
		align-items: center;
		.add-button{
			margin-left: 20px;
			margin-right: 809px;
		}
		span{
			font-size: 14px;
			margin-left: 20px;
		}
	}
	.main{
		width: 100%;
		padding: 15px;
		height: 580px;
		background-color: #ffffff;
		border-radius: 4px;
		box-shadow: 2px 0px 10px rgba(0,0,0,0.2);
		overflow: hidden;
	}
</style>